import React, { useState } from 'react'
import { flushSync } from 'react-dom';

/**
 * 更新队列机制
和类组件中的setState一样，每次更新状态值，也不是立即更新，而是加入到更新队列中！

React 18 全部采用批更新

React 16 部分批更新，放在其它的异步操作中，依然是同步操作！

可以基于flushSync刷新渲染队列
 */
export default function Demo8FlushSync() {
    console.log('OK');
    let [x, setX] = useState(10);
    let [y, setY] = useState(20);

    const handler = () => {
        setX(100);
        setY(200);

        //    setTimeout(() => {
        //         setX(100);
        //         setY(200);
        //     }, 1000); 

        // flushSync(() => {
        //     setX(100);
        // });
        // setY(200);
    };

    let [num, setNum] = useState(10);
    const handler2 = () => {
        for (let i = 0; i < 10; i++) {
            // 函数式更新
            setNum(num => {
                return num + 1;
            });
        }
    };

    return <div>
        <div className="demo">
            <span>{x}</span>
            <span>{y}</span>
            <button onClick={handler}>处理</button>
        </div>

        <div className="demo">
            <span>{num}</span>
            <button onClick={handler2}>处理</button>
        </div>
    </div>;
}
